<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">上市管理</span>
      <a-button type="primary" @click="showModal()">
        <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
        添加积分
      </a-button>
    </div>
    <div class="card-box">
      <div class="card-list">
        <div class="list-item" v-for="item in list" :key="item.pairId">
          <div class="item-info">
            <span class="item-label">积分名称</span>
            <span class="item-value value-bold">{{ item.coinName }}</span>
          </div>
          <div class="item-info">
            <span class="item-label">发行平台名称</span>
            <span class="item-value value-bold">{{ item.companyName }}</span>
          </div>
          <div class="item-info">
            <span class="item-label">接入时间</span>
            <span class="item-value">{{ item.createTime }}</span>
          </div>
          <div class="item-info">
            <span class="item-label">积分代号</span>
            <span class="item-value">{{ item.coinSymbol }}</span>
          </div>
          <div class="item-info">
            <span class="item-label">币对管理</span>
            <span class="item-value">{{ item.coinSymbols && item.coinSymbols.length ? item.coinSymbols.join(',') : '' }}</span>
          </div>
          <div class="item-info">
            <span class="item-label">交易管理</span>
            <span class="item-value">{{ item.isEnable === 0 ? '已关闭' : item.isEnable === 1 ? '已开启' : '' }}</span>
          </div>
          <div class="item-info">
            <span class="item-label">备注</span>
            <span class="item-value">{{ item.pairDescription }}</span>
          </div>
          <div class="item-btn">
            <a-button type="primary" @click="handleOperate(item)"> 操作 </a-button>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="page-box" v-if="list.length">
        <a-pagination v-bind="pagination" :show-total="(total) => `共 ${total} 条`" @change="handleTableChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { TablePaginationConfig, TableProps } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { computed, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestCoinPairList } from '/@/api/exchange/lanuch'

  const router = useRouter()
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 6,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<LanuchTypes.SearchData>()

  const list = ref<LanuchTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 6
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestCoinPairList({
      ...page.value,
      ...searchParams.value,
    })
    list.value = responseData.list || []
    list.value.forEach((item) => {
      item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
    })
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: LanuchTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  // 新建标签
  const showModal = () => {
    router.push({ path: '/lanuch/add' })
  }

  // 操作详情
  const handleOperate = (info: LanuchTypes.IResponse) => {
    router.push({ path: '/lanuch/operate', query: { pairId: info.pairId } })
  }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped>
  .card-box {
    display: flex;
    flex-direction: column;
    width: 100%;

    .card-list {
      display: flex;
      flex-wrap: wrap;

      .list-item {
        width: 400px;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: 30px;
        padding: 12px;
        box-sizing: border-box;
        margin-right: 24px;
        margin-bottom: 24px;

        .item-info {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .item-label {
            text-align: right;
            margin-right: 10px;
            width: 100px;
          }

          .value-bold {
            font-weight: 500;
            font-size: 20px;
          }
        }

        .item-btn {
          display: flex;
          justify-content: center;
        }
      }
    }

    .page-box {
      padding-top: 16px;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 24px;
    }
  }
</style>
